<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:o="http://omnifaces.org/ui"
	xmlns:of="http://omnifaces.org/functions"
>
	<ui:define name="description">
		<p>
			Collection of EL functions for string manipulation: <code>of:abbreviate()</code>, <code>of:capitalize()</code>, <code>of:concat()</code>,  
			<code>of:prettyURL()</code>, <code>of:encodeURL()</code>, <code>of:escapeJS()</code> and <code>of:formatX()</code>.
		</p>
		<p>
			Instead of <code>of:formatX()</code>, you can also use
			<h:link value="&lt;o:outputFormat&gt;" outcome="/components/outputFormat" styleClass="code" />.
		</p>
		<ui:include src="/WEB-INF/includes/utils/feature-request.xhtml" />
	</ui:define>		
	
	<ui:define name="demo">
		<c:set var="string1" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
		<c:set var="string2" value="left" />
		<c:set var="string3" value="right" />
		<c:set var="string4" value="STRING with díãçrïtìcs" />

		<p>
			Abbreviate a long string: #{of:abbreviate(string1, 20)}
		</p>
		<p>
			Capitalize a string: #{of:capitalize(string2)}
		</p>
		<p>
			Concat 2 strings: #{of:concat(string2, string3)}
		</p>
		<p>
			Regex-replace a string: #{of:replaceAll(string1, '\\b', '&#x201D;')}
		</p>
		<p>
			Regex-match a string: #{of:matches(string2, '\\p{IsLatin}+')}
		</p>

		<p>
			Following functions deal with the following string: "#{string4}"
		</p>
		<ul>
			<li>
				Create a pretty URL (part): #{of:prettyURL(string4)} 
				<a href="#{of:prettyURL(string4)}">check link URL</a> (don't click :) )
			</li>
			<li>
				URL-encode with UTF-8: #{of:encodeURL(string4)} 
				<a href="#{request.requestURI}?test=#{of:encodeURL(string4)}">click link</a>
			</li>
			<li>
				Escape for usage in JavaScript: #{of:escapeJS(string4)} 
				<a href="javascript:alert('#{of:escapeJS(string4)}')">click to see alert</a>
			</li>
		</ul>

		<p>
			Format strings in EL:
		</p>
		<ul>
			<li>#{of:format1('one {0}', 'two')}</li>
			<li>#{of:format2('one {0} three {1}', 'two', 'four')}</li>
			<li>#{of:format3('one {0} three {1} five {2}', 'two', 'four', 'six')}</li>
			<li>#{of:format4('one {0} three {1} five {2} seven {3}', 'two', 'four', 'six', 'eight')}</li>
			<li>#{of:format5('one {0} three {1} five {2} seven {3} nine {4}', 'two', 'four', 'six', 'eight', 'ten')}</li>
		</ul>
	</ui:define>
</ui:composition>